<template>
    <div class="platform-page page">
        <div class="content">
            <PlatformCrumb back="返回">
                <el-button type="primary" @click="putAdminInfo" size="mini" slot="right">保存全部</el-button>
            </PlatformCrumb>
            <div class="upload">
                <div class="upload-item">
                    <div class="title">
                        <span class="name">LOGO</span>
                        <span class="desc">（只支持jpg格式、上传图片大小2M内）</span>
                    </div>
                    <div class="upload-con">
                        <el-upload
                                class="avatar-uploader"
                                :action="imgupload"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                                :on-success="handleLogo"
                        >
                            <img v-if="data.logo" :src="data.logo|filtersImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </div>

                <div class="upload-item">
                    <div class="title">
                        <span class="name">轮播图</span>
                        <span class="desc">（只支持jpg格式、上传图片大小2M内）</span>
                    </div>
                    <div v-for="(item,index) in lunbuo" class="upload-con display-flex-row">
                        <div class="upload-con-item">
                            <div class="sub-title">{{item.title}}：</div>
                            <el-upload
                                    class="avatar-uploader"
                                    :action="imgupload"
                                    :show-file-list="false"
                                    :on-success="(res, file)=>handlelunboSuccess(res, file,index)"
                                    :before-upload="beforeAvatarUpload"
                            >
                                <img v-if="item.img" :src="item.img|filtersImg" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="upload-con-item">
                            <div class="sub-title">URL</div>
                            <el-input v-model="item.url" placeholder="请输入url" size="mini"></el-input>
                        </div>
                    </div>
                </div>

                <div class="upload-item">
                    <div class="title">
                        <span class="name">平台资源优势</span>
                        <span class="desc">（只支持jpg格式、上传图片大小2M内）</span>
                    </div>
                    <div v-for="(item,index) in youshi" class="upload-con display-flex-row">
                        <div class="upload-con-item">
                            <div class="sub-title">优势{{item.name}} ICON：</div>
                            <el-upload
                                    class="avatar-uploader"
                                    :action="imgupload"
                                    :show-file-list="false"
                                    :on-success="(res, file)=>handleyoushiSuccess(res, file,index)"
                                    :before-upload="beforeAvatarUpload"
                            >
                                <img v-if="item.img" :src="item.img|filtersImg" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="upload-con-item">
                            <div class="sub-title">主标题：</div>
                            <el-input v-model="item.title" placeholder="请输入标题内容" size="mini"></el-input>
                        </div>
                        <div class="upload-con-item">
                            <div class="sub-title">内容：</div>
                            <el-input v-model="item.content" placeholder="请输入主题内容" type="textarea" resize="none"
                                      size="mini"></el-input>
                        </div>
                    </div>
                </div>

                <div class="upload-item">
                    <div class="title">
                        <span class="name">平台简介</span>
                        <span class="desc">（只支持jpg格式、上传图片大小2M内）</span>
                    </div>
                    <div class="upload-con display-flex-row">
                        <div class="upload-con-item">
                            <div class="sub-title">视频上传</div>
                            <div class="hezuohb">
                                <video
                                        v-if="data.infoVideo"
                                        style="width:500px; margin-right: 20px"
                                        :src="data.infoVideo|filtersImg"
                                        controls>
                                </video>
                                <el-upload
                                        class="avatar-uploader mr10"
                                        :action="videoupload"
                                        :show-file-list="false"
                                        :on-success="handleVideoSuccess"
                                >
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
<!--                                <p v-if="data.infoVideo">{{data.infoVideo}}</p>-->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 合作伙伴 -->
                <div class="upload-item">
                    <div class="title">
                        <span class="name">合作伙伴</span>
                        <span class="desc">（只支持jpg格式、上传图片大小2M内）</span>
                    </div>
                    <div class="upload-con display-flex-row">
                        <div class="upload-con-item">
                            <div class="sub-title">图片上传</div>
                            <div class="hezuohb">
                                <div class="avatar-uploader mr10 mb10" v-for="(item,index) in cooperation">
                                    <img :src="item|filtersImg" class="avatar">
                                    <span class="cur" @click="deletecooperation(index)">删除</span>
                                </div>
                                <el-upload
                                        class="avatar-uploader"
                                        :action="imgupload"
                                        :show-file-list="false"
                                        :on-success="handlehezuoSuccess"
                                        :before-upload="beforeAvatarUpload"
                                >
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 界面底部栏 -->
                <div class="upload-item">
                    <div class="title">
                        <span class="name">界面底部栏</span>
                        <span class="desc">（只支持jpg格式、上传图片大小2M内）</span>
                    </div>
                    <div class="upload-con display-flex-row">
                        <div class="upload-con-item">
                            <div class="sub-title">更换二维码</div>
                            <el-upload
                                    class="avatar-uploader"
                                    :action="imgupload"
                                    :show-file-list="false"
                                    :on-success="handlewmSuccess"
                                    :before-upload="beforeAvatarUpload"
                            >
                                <img v-if="data.publicImg" :src="data.publicImg|filtersImg" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                        <div class="upload-con-item">
                            <div class="sub-title">二维码名称：</div>
                            <el-input v-model="data.publicName" placeholder="请输入二维码名称" size="mini"></el-input>
                        </div>
                        <div class="upload-con-item">
                            <div class="sub-title">地址：</div>
                            <el-input v-model="data.infoAddress" placeholder="请输入地址" type="textarea" resize="none"
                                      size="mini"></el-input>
                        </div>
                    </div>
                    <div class="upload-con display-flex-row">
                        <div class="upload-con-item">
                            <div class="sub-title">联系方式：</div>
                            <el-input v-model="data.infoPhone" placeholder="请输入联系方式" type="textarea" resize="none"
                                      size="mini"></el-input>
                        </div>
                        <div class="upload-con-item">
                            <div class="sub-title">邮箱：</div>
                            <el-input v-model="data.infoMail" placeholder="请输入邮箱" type="textarea" resize="none"
                                      size="mini"></el-input>
                        </div>
                    </div>
                    <div class="upload-con display-flex-row">
                        <div class="upload-con-item">
                            <div class="sub-title">网站备案信息-1：</div>
                            <el-input v-model="data.putOnFileOne" placeholder="请输入网站备案信息-1" type="textarea"
                                      resize="none" size="mini"></el-input>
                        </div>
                        <div class="upload-con-item">
                            <div class="sub-title">网站备案信息-2：</div>
                            <el-input v-model="data.putOnFileTwo" placeholder="请输入网站备案信息-2" type="textarea"
                                      resize="none" size="mini"></el-input>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {putAdminInfo, getAdminInfo} from '../../api/api/platform.js';
    import {imgupload, videoupload, fileupload, basefile, baseImgPath} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb,
        },
        data() {
            return {
                imageUrl: "",
                imgupload: imgupload,
                videoupload: videoupload,
                fileupload: fileupload,
                lunbuo: [
                    {
                        img: '',
                        url: '',
                        title: '第一张图片',

                    }, {
                        img: '',
                        url: '',
                        title: '第二张图片',
                    }, {
                        img: '',
                        url: '',
                        title: '第三张图片',
                    }, {
                        img: '',
                        url: '',
                        title: '第四张图片',
                    }
                ],
                youshi: [
                    {
                        img: '',
                        url: '',
                        title: '',
                        name: '一',
                        content: '',

                    }, {
                        img: '',
                        url: '',
                        title: '',
                        name: '二',
                        content: '',

                    }, {
                        img: '',
                        url: '',
                        title: '',
                        name: '三',
                        content: '',

                    }, {
                        img: '',
                        url: '',
                        title: '',
                        name: '四',
                        content: '',

                    },
                ],
                hezuo: [],
                cooperation: [],
                data: {
                    "logo": "",
                    "advantage": "",
                    "banner": "",
                    "cooperation": "",
                    "infoAddress": "",
                    "infoMail": "",
                    "infoPhone": "",
                    "infoVideo": "",
                    "publicImg": "",
                    "publicName": "",
                    "putOnFileOne": "",
                    "putOnFileTwo": ""
                }
            };
        },
        created() {
            this.getAdminInfo()
        },
        methods: {
            deletecooperation(e) {
                this.cooperation.splice(e, 1)
            },
            // 上传视频
            handleVideoSuccess(res, file) {
                this.data.infoVideo = res.data.path;
            },
            // 合作伙伴图片
            handlehezuoSuccess(res, file) {
                this.cooperation.push(res.data.path)
            },
            // 合作伙伴数据处理数组转字符串
            getcooperation() {
                this.data.cooperation = JSON.stringify(this.cooperation)
            },
            getcooperationjson() {
                this.cooperation = JSON.parse(this.data.cooperation)
            },
            // 轮播上传
            handlelunboSuccess(res, file, index) {
                this.lunbuo[index].img = res.data.path;
            },
            // 轮播数据处理 数组转字符串
            getlunbo() {
                this.data.banner = JSON.stringify(this.lunbuo)
            },
            getlunbojson() {
                this.lunbuo = JSON.parse(this.data.banner)
            },
            // 优势处理
            getyoushi() {
                this.data.advantage = JSON.stringify(this.youshi)
            },
            getyoushijson() {
                this.youshi = JSON.parse(this.data.advantage)
            },
            handleyoushiSuccess(res, file, index) {
                this.youshi[index].img = res.data.path;
            },
            handlewmSuccess(res, file) {
                this.data.publicImg = res.data.path;
            },
            handleLogo(res, file) {
                console.log(res);
                this.data.logo = res.data.path
            },
            // 保存编辑
            putAdminInfo() {
                var that = this;
                that.getlunbo()
                that.getyoushi()
                that.getcooperation()
                putAdminInfo(that.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                    }
                });
            },
            // 获取编辑
            getAdminInfo() {
                var that = this;
                getAdminInfo().then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.data = res.data
                        that.getlunbojson()
                        that.getyoushijson()
                        that.getcooperationjson()
                    }
                });
            },
            beforeimgUpload(file) {
                const isJPG = file.type === "image/jpeg";
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error("图片只能是 JPG 格式");
                }
                if (!isLt2M) {
                    this.$message.error("上传图片大小不能超过 2MB!");
                }
                return isJPG && isLt2M;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === "image/jpeg";
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error("图片只能是 JPG 格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传图片大小不能超过 2MB!");
                }
                return isJPG && isLt2M;
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    @deep: ~">>>";

    .upload {
        background: #fff;
        padding: 30px 130px;
    }

    .upload-item {
        margin-bottom: 30px;

        > .title {
            &::before {
                width: 4px;
                height: 18px;
                background-color: #c60818;
                display: inline-block;
                content: " ";
                margin-right: 10px;
                vertical-align: -3px;
            }

            .name {
                font-size: 16px;
            }

            .desc {
                font-size: 12px;
                color: #999;
                margin-left: 15px;
            }
        }
    }

    .upload-con {
        margin-top: 24px;

        @{deep} {
            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;

                &:hover {
                    border-color: #409eff;
                }
            }
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 98px;
            height: 98px;
            line-height: 98px;
            text-align: center;
        }

        .avatar {
            width: 98px;
            height: 98px;
            display: block;
        }

        .sub-title {
            margin-bottom: 27px;
        }

        .upload-con-item {
            margin-right: 68px;

            @{deep} {
                .el-button {
                    margin-top: 20px;
                    float: right;
                }
            }
        }
    }
</style>
